<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <div class="title">智能人事管理系统</div>
                <div style="color: white">您好,今天是:{{date}}</div>
                <el-dropdown class="userInfo" @command="commandHandler">
                  <span class="el-dropdown-link">
                        {{user.name}}<i><img :src="user.userface" alt=""></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userInfo" @click.native="openDrawer">设置</el-dropdown-item>
                        <el-dropdown-item divided command="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-drawer
                    @close="initupdateuser"
                    :visible.sync="drawer"
                    :with-header="false">
                <div style="height: 280px;display: flex;justify-content: space-between">
                    <div>
                        <table>
                            <tr>
                                <td>
                                    <el-tag  size="small" type="warning" style="margin-right: 5px">工号&nbsp; :&nbsp;</el-tag>
                                    <el-input
                                            readonly="readonly"
                                            v-model="updateuser.jobNo"
                                            size="mini">
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <el-tag size="small" type="warning" style="margin-right: 5px">用户名&nbsp; :&nbsp;</el-tag>
                                    <el-input
                                            :readonly="read"
                                            v-model="updateuser.name"
                                            size="mini">
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <el-tag  size="small" type="warning" style="margin-right: 5px">手机号码&nbsp; :&nbsp;</el-tag>
                                    <el-input
                                            :readonly="read"
                                            v-model="updateuser.phone"
                                            size="mini">
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <el-tag  size="small" type="warning" style="margin-right: 5px">电话号码&nbsp; :&nbsp;</el-tag>
                                    <el-input
                                            :readonly="read"
                                            v-model="updateuser.telephone"
                                            size="mini">
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <el-tag  size="small" type="warning" style="margin-right: 5px">地址&nbsp; :&nbsp;</el-tag>
                                    <el-input
                                            :readonly="read"
                                            v-model="updateuser.address"
                                            size="mini">
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <el-tag  size="small" type="warning" style="margin-right: 5px">部门&nbsp; :&nbsp;</el-tag>
                                    <el-input
                                            readonly="readonly"
                                            v-model="updateuser.department.name"
                                            size="mini">
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <el-tag size="small" type="warning" style="margin-right: 5px">备注&nbsp;:&nbsp;&nbsp;</el-tag>
                                    <el-input
                                            :readonly="read"
                                            class="hometag"
                                            size="mini"
                                            type="textarea"
                                            :autosize="{ minRows: 2, maxRows: 4}"
                                            placeholder="请输入内容"
                                            v-model="updateuser.remark">
                                    </el-input>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div>
                    <span style="float: right;display: flex;flex-direction: column">
                    <i><img :src="user.userface" style="width: 120px;height: 120px;border-radius: 24px;margin-left: 10px;" alt=""></i>
                    <el-tag type="success" style="margin-left: 30px;width: 80px;align-content: center;text-align: center">头像</el-tag>
                    <el-button size="warning" type="mini" style="margin-top: 20px;width: 120px" @click="read=null">修改个人信息</el-button>
                    <el-button
                            v-if="read==null"
                            @click="updateUser"
                            type="primary" size="mini"
                            style="margin-top: 10px;margin-left:5px;width: 50px">
                        完成
                    </el-button>
                    </span>
                    </div>
                </div>
                <div class="block" style="position: fixed;bottom: 0;">
                    <el-image :src="src"></el-image>
                </div>
            </el-drawer>
            <el-container>
                <el-aside width="200px">
<!--                    启用vue-router模式-->
                    <el-menu router>
                        <el-submenu :index="index+''" v-for="(item,index) in routes" v-if="!item.hidden" :key="index">
                            <template slot="title">
                                <i style="margin-right: 6px" :class="item.iconCls"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item :index="children.path" v-for="(children,indexj) in item.children" :key="indexj">{{children.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right" v-show="this.$router.currentRoute.path!='/home'">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div class="welcome" v-show="this.$router.currentRoute.path=='/home'">
                        <el-carousel :interval="4000" type="card" height="220px">
                            <el-carousel-item v-for="(img,item) in imgList" :key="item">
                                <img :src="img.url" style="width: 100%;height:220px">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div style="display: flex;justify-content: space-around;align-items: flex-start" v-show="this.$router.currentRoute.path=='/home'">
                        <div id="myChart"></div>
                        <div style="width: 500px;height: 500px">
                            <el-calendar v-model="cale">
                            </el-calendar>
                        </div>
                    </div>
                    <router-view class="setting"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                src:"https://gitee.com/KKP133/personnel_management_system/raw/master/blue.JPG",
                user:JSON.parse(window.sessionStorage.getItem("user")),
                updateuser:{
                    jobNo:null,
                    department:{
                        name:''
                    },
                    name:'',
                    phone:null,
                    telephone:null,
                    address:'',
                    remark:''
                },
                drawer: false,
                read:"readonly",
                departmentNumberView:[],
                date: this.dateFormat("YYYY-mm-dd",new Date()),
                cale:  new Date(),
                imgList:[
                    {
                        url:"https://gitee.com/KKP133/personnel_management_system/raw/master/fj1.jpg",
                    },
                    {
                        url:"https://gitee.com/KKP133/personnel_management_system/raw/master/fj4.jpg"
                    },
                    {
                        url:"https://gitee.com/KKP133/personnel_management_system/raw/master/fj5.jpg"
                    },
                    {
                        url:"https://gitee.com/KKP133/personnel_management_system/raw/master/fj6.jpg"
                    }
                    ]
            }
        },
        computed:{
            routes(){
                return this.$store.state.routes;
            }
        },
        mounted() {
            this.initDepartmentNumberView();
        },
        methods:{
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                let dep = [];
                for(let item of this.departmentNumberView){
                    dep.push({"value": item.count,"name":item.name})
                }
                // 绘制图表
                myChart.setOption({
                    series: [{
                        name: '部门结构',
                        type: 'pie',//series系列：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、
                        radius: [0, '82%'],//文字块的圆角
                        hoverAnimation:true, // 是否开启 hover 在扇区上的放大动画效果
                        data:dep
                    }],
                });
            },
            initDepartmentNumberView(){
                this.getRequest("/getEveryDeparmentNumbers/").then(resp=>{
                    this.departmentNumberView = resp;
                    this.drawLine();
                })
            },
            updateUser(){
                this.putRequest("/system/hr/updatehrinfo",this.updateuser).then(resp=>{
                    if(resp){
                        this.initUser();
                        this.read="readonly";
                    }
                })
            },
            initUser(){
                this.getRequest("/system/hr/gethrinfo").then(resp=>{
                    if(resp){
                        this.user = resp;
                        window.sessionStorage.setItem("user",JSON.stringify(resp));
                    }
                })
            },
            initupdateuser(){
                this.updateuser = Object.assign({},this.user);
                this.read = "readonly";
            },
            openDrawer() {
                this.updateuser = Object.assign({},this.user);
                this.drawer = true;
            },
            commandHandler(cmd){
                if(cmd == 'logout'){
                    this.$confirm('此操作将退出登陆, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout");
                        window.sessionStorage.removeItem('user');
                        window.sessionStorage.removeItem('nations');
                        window.sessionStorage.removeItem('jobLevels');
                        window.sessionStorage.removeItem('positions');
                        window.sessionStorage.removeItem('politicsstatus');
                        window.sessionStorage.removeItem('allDepartments');
                        window.sessionStorage.removeItem('allrps');
                        this.$router.replace('/');
                        this.$store.commit('initRoutes',[]);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            },
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    };
                };
                return fmt;
            }
        }
    }
</script>

<style>
    .setting{
        margin-top: 13px;
    }
    .welcome{
        text-align: center;
        font-size: 30px;
        font-family:"Microsoft YaHei";
        color: black;
    }
    .homeHeader {
        /*background-color: #409eff;*/
        background-color: rgb(75, 84, 94);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 15px;
        box-sizing: border-box;
    }
    .homeHeader .title{
        font-size: 30px;
        font-family: 华文行楷;
        color: #ffffff;
    }
    .homeHeader .userInfo{
        /*鼠标放上去是一个手指*/
        cursor: pointer;
    }
    .el-dropdown-link img{
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 10px;
    }
    .el-dropdown-link{
        display: flex;
        align-items: center;
        color:#ffffff;;
    }
    #myChart {
        width:  600px !important;
        height: 400px !important;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .el-calendar-day{
        height: 50px !important;
    }
</style>
